<div class="container">

    <div class="row row-offcanvas row-offcanvas-right">
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <div class="list-group">              
                <a href="#" class="list-group-item active">Link</a>                
                 <a href="#" class="list-group-item"  ng-repeat="category in categories">{{category.name}}</a>              
            </div>
        </div><!--/span-->

        <div class="col-xs-12 col-sm-9">
            <!-- <p class="pull-right visible-xs">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
            </p> -->
            
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
	    <ol class="carousel-indicators">
	        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
	        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
	        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
	    </ol>
	    <div class="carousel-inner">
	        <div class="carousel-item active">
	            <img class="d-block w-100" src="imgs/glowayYi.jpg" alt="First slide">
	        </div>
	        <div class="carousel-item">
	            <img class="d-block w-100" src="imgs/uniicMemery.png" alt="Second slide">
	        </div>
	        <div class="carousel-item">
	            <img class="d-block w-100" src="imgs/sipeedm1.webp" alt="Third slide">
	        </div>
	    </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
	    data-slide="prev">
	
	    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
	
	    <span class="sr-only">Previous</span>
	
	  </a>
	 <a class="carousel-control-next" href="#carouselExampleIndicators"
	    role="button" data-slide="next">
	
	    <span class="carousel-control-next-icon" aria-hidden="true"></span>
	
	    <span class="sr-only">Next</span>
	
	  </a>
	</div><!-- /.carousel -->
</div>
       
    </div><!--/row-->
    <hr>
    <!-- previews  -->
    <div class="row">
        <div class="col">
            <div class="alert alert-info">
                <strong>海，看看！</strong> 新品上线。
            </div>
        </div>
    </div>
    <div class="row">    
        <div class="col-2"  ng-repeat="item in list">
            <div class="img-thumbnail">
                <a  href="" data-target="#myProducts" alt="View details" role="button" data-toggle="modal" ng-click="setProduct(item)"><img alt="" ng-src="{{'rest/shop/products/images/' + item.imagePath}}"></a>
                <div class="caption text-center">
                    <h5>{{item.name}}</h5>
                    <p><a href="" class="btn btn-primary" ng-click="addToCart(item)"><i class="glyphicon glyphicon-shopping-cart"></i> 加入购物车</a></p>
                </div>
            </div>
        </div>
    </div>      
    <hr/>
    <!-- promos -->
    <div class="row">
        <div class="col">
            <div class="alert alert-info">
                <strong>停留一分钟瞧瞧！</strong> 不要错过我们最新推荐的产品。
            </div>
        </div>
    </div>
    <div class="row">    
        <div class="col-2"  ng-repeat="itemp in promos">
            <div class="img-thumbnail">
                <a href="" data-target="#myProducts" alt="View details" role="button" data-toggle="modal" ng-click="setProduct(itemp)"><img alt="" ng-src="{{'rest/shop/products/images/' + itemp.imagePath}}"></a>
                <div class="caption product-detail-center">
                    <h5>{{itemp.name}}</h5>
                    <p><a href="" class="btn btn-primary" ng-click="addToCart(itemp)"><i class="glyphicon glyphicon-shopping-cart"></i> 加入购物车</a></p>
                </div>
            </div>
        </div>	  
    </div>
    <hr/>
    <!-- Modal -->
    <div class="modal fade" id="myProducts" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">{{Message}} for {{Product.name}}</h4>
                </div>
                <div class="modal-body">
                    <p class="text-center"><img alt="" ng-src="{{'rest/shop/products/images/' + Product.image}}"></p>
                    <p>{{Product.description}}</p>
                    <hr/>
                    <p class="pull-right">价格 : {{Product.price| currency}}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" ng-click="addToCart(Product.item)"><i class="glyphicon glyphicon-shopping-cart" data-dismiss="modal"></i> 加入购物车</button>
                </div>
            </div>
        </div>
    </div>

</div><!--/.container-->